<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>3DTiles模型</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>

    <div id="mapContainer" style="position: relative;">
    </div>

</body>
<!-- <script src='http://localhost:9000/examples/GiswayEngine.js'></script> -->
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    let cameraFov = 2; //相机视角
    window.app = new GE.App('mapContainer', {
       
        //衡阳分块数据1
        // position: [112.63373595437776, 26.870605935077954, 10000],
        // lookAt: [112.63373595437776, 26.870605935077954, 0],

          //衡阳分块数据2
        position: [112.620026998759, 26.8769870854122, 1000],
        lookAt: [112.620026998759, 26.8769870854122, 0],
        cameraScrollSpeed: 15,
        minZoom: 18,
        maxZoom: 23,
        cameraFov: cameraFov, //相机的fov
        verticalLevel: 8,
        maxSlopeAngle: 50,

        ambientLightIntensity: 2,
        ambientLightcolor: 0xffffff,//环境光照的颜色
        ambientLightType: 'ambient',//环境光照的类型，有如下类型:ambient，hemisphere
        supportLightType: 'single',//方向光的类型，有如下类型:single，double，tripple
        supportLightIntensity: 1,//方向光的强度
        supportLightcolor: '#ffffff', //方向光的颜色
        lightDistance: 2000,//方向光源距离初始相机target的距离
        lightHeight: 50,//方向光源的高度

        useCarpet: true,
        background: "Fog",
        useDefaultTexture: false, //是否使用瓦片默认纹理
        baseLayer: [
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                // url:'https://gis5.ldwzh.com:28015/pj16/{z}/{x}/{y}.png',
                // url: 'https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsids=w&token=3c7931ed450acfc9c8170efeead4759b146cfb78f0ee6908dd7e287270ee1b6f', //星空的影像地图url
                readableUrl: true,
                tileType: 'image',
                maxDataLevel: 18
            },
        ]
    });

    let urlArray = [
        'http://localhost:9009/examples/resources/osgb/衡阳分块/output_1/tileset.json',
        'http://localhost:9009/examples/resources/osgb/衡阳分块/output_2/tileset.json',
        'http://localhost:9009/examples/resources/osgb/衡阳分块/output_3/tileset.json',
        'http://localhost:9009/examples/resources/osgb/衡阳分块/output_4/tileset.json'
    ];
    urlArray.forEach(url => {
        tiles3d(url);
    });
    
    
    function tiles3d(url) {//examples\resources\3dtiles\Data\tileset.json
        let threeTileModel = new GE.Tiles3d({
            url: url, refinement: 600, loadRange: 0,//衡阳分块数据2
            minSize: 1000,
            maxSize: 5000,
            maxBytesSize: 0.3 * 2**10,
            minByteSize: 0.2 * 2**10,
            screenErrorFactor: 1.5, //屏幕误差缩放的倍数
            // screenErrorFactor: 8400, //屏幕误差缩放的倍数
            isOpenAdditionalCamera: true, //是否添加预加载的额外相机
            additionCameraFov: cameraFov * 2, //额外相机的fov
            unloadPercent: 1,
            maxJobs: 15,
            canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            isSupportTransparent: false,
            isDoubleSide: false, //是否开启双面渲染
            //changeEmissive: true, //是否开启自发光
            //  geoSystem: '3857', //4978是椭球坐标系，3857是web墨卡托坐标系。这个参数可以不配置，默认是4978
            // isOnlyLoadCoarse: true, //是否只加载最粗略的瓦片
            dracoGltfPath: 'http://localhost:9009/examples/resources/plugin/draco/gltf/', //draco压缩的gltf文件解压后存放的路径
        });
        app.add(threeTileModel);
        // window.tiles3d = threeTileModel;
    }
    
    window.app.on('Click', function (e) {
        console.log(e);
    });

    window.app.on('ZoomChange', function (e) {
    });

    // window.app.on('MapDragStart', function (e) {
    //     console.log('地图拖拽开始');
    // });
    // window.app.on('MapDragEnd', function (e) {
    //     console.log('地图拖拽结束');
    // });

</script>

</html>